<template>
  <div class="login">
    <div class="login_box">
      <Row>
        <Col span="12">
          <div class="login_left"></div>
        </Col>
        <Col span="12">
          <div class="login_right">
            <div class="login_right_cover">
              <div class="logo">
               <h1>odin7c-j开发框架</h1> 
              </div>
              <Form :model="loginData" class="loginForm">
                  <FormItem>
                    <Input class="username" v-model="loginData.accounts" placeholder="请输入账号" ></Input>
                  </FormItem>
                  <FormItem >
                    <Input class="password" v-model="loginData.password" type="password" placeholder="请输入密码"></Input>
                  </FormItem>
                  <!-- <FormItem class="login_help">
                    <Col span="12">
                      <Checkbox v-model="single" >记住账号</Checkbox>
                    </Col>
                    <Col span="12" class="login_help_right">
                        
                    </Col>
                  </FormItem> -->
                  <FormItem>
                      <Button class="login_bnt" :loading="loading" @click="login">登录</Button>
                  </FormItem>
              </Form>
            </div>
          </div>
        </Col>
      </Row>
    </div> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      //single:localStorage.getItem('accounts') ? true : false,
      loading:false,
      loginData: {
        accounts: '',
        password: '',
      },
      cityname:""
    };
  },
  mounted() {
    //this.getCityName()
    var loginType = this.$route.query.loginType;
    console.log("this.$route.query");
    console.log(this.$route.query);
    if (loginType == "third") {
      this.loginData.accounts = this.$route.query.username;
      this.loginData.password = this.$route.query.password;
      this.login();
    }
  },
  methods: {
    login() {
      const self = this;
      this.$http
        .post("/sysuser/login", {
          username: this.loginData.accounts,
          password: this.loginData.password
        })
        .then(res => {
          if (res.retHead.code == "0000000") {
            localStorage.setItem("token", res.retBody.token);
            localStorage.setItem("userId", res.retBody.userId);
            localStorage.setItem("username", res.retBody.username);
            localStorage.setItem("userType", res.retBody.userType);
            localStorage.setItem("realName", res.retBody.realName);
            localStorage.setItem("organCode", res.retBody.organCode);
            localStorage.setItem("organName", res.retBody.organName);
            localStorage.setItem("deptId", res.retBody.deptId);
            this.$router.push("/home");
          } else {
            this.$Message.warning({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          }
        });
    },
    // saveAccounts(value){
    //   if (value) {
    //       localStorage.setItem("accounts", this.loginData.accounts);
    //   }else{
    //       localStorage.removeItem("accounts", this.loginData.accounts);
    //   }
    // },
    getCityName(){
      this.$http.get('/systemparam/doGetCityName')
      .then(res=>{
        if (res.retHead.code == "0000000") {
          //this.cityname = res.retBody;
          localStorage.setItem("cityname", res.retBody);
          this.cityname = localStorage.getItem("cityname")
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
html body{
  height: 100%;
}
.login{
  height: 100%;
  width: 100%;
  background: url(../../../static/img/login_bg.png) right center no-repeat , linear-gradient(to right,#0467f9, #41b9fa); 
  background-size: contain;
  position: relative;
  .login_box{
    position: absolute;
    width: 1000px;
    height: 550px;
    margin: auto;
    top: -5px;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 5px;
    z-index: 9;
    &::after{
      content: "";
      background: url(../../../static/img/box-shadow.png)bottom center no-repeat;
      background-size: contain;
      width: 95%;
      height: 120px;
      position: absolute;
      bottom: -45px;
      left: 2.5%;
      z-index: -1;
    }
    .ivu-row,.ivu-col{
      height: 100%;
    }
    .login_left{
      position: relative;
      height: 100%;
      width: 100%;
      background: url(../../../static/img/login_left.png) top center;
      background-size: cover ;
      -webkit-animation:LtoRmove 0.5s forwards ease-in-out;
    }
    .login_right{
      height: 100%;
      width: 100%;
      position: relative;
      -webkit-animation:RtoLmove 0.5s forwards ease-in-out;
      .logo{
        height: 190px;
        h1{
          text-align: center;
          line-height: 190px;
        }
      }
    }
  }
}
.login_right_cover{
  width: 100%;
  background: #fff;
  position: absolute;
  bottom: 0;
  height: 485px;
  border-radius: 0 10px 10px 0;
  .loginForm{
    width: 300px;
    margin: 0 auto;
    .login_help{
      color: #999999;
      .login_help_right{
        text-align: right;
        a{
          color: #999999;
        }
      }
    }
  }
}
.login_bnt{
  width: 100%;
  height: 36px;
  color: #fff;
  background: #ff7916;
  border: none;
  text-align: center;
  border-radius: 18px;
}
.Copyright{
  font-size: 12px;
  position: absolute;
  width: 100%;
  bottom: 5px;
  left: 0;
  color: #0d58bf;
  text-align: center;
}
@keyframes LtoRmove
{
from {left:-200px;}
to {left:0px;}
}
@keyframes RtoLmove
{
from {right:-200px;}
to {right:0px;}
}
</style>

